<!--
 * @Descripttion: 微信公众号绑定手机号码页面
 * @version: 
 * @Author: yuanliutech
 * @Date: 2022-11-18 14:13:35
 * @LastEditors: yuanliutech@lwj
 * @LastEditTime: 2023-02-10 09:18:08
-->
<template>
  <div class="page">
    <div class="top">
      <el-image :src="imageBg" class="image-bg"></el-image>
    </div>
    <!-- <div class="nav">公众号网页{{ isWechat }}</div>
    <div class="nav">挂载</div>
    <div class="nav">{{ wx }}</div>
    <div class="nav">{{ wx.code }}</div>
    <div class="nav">{{ wx.openid }}</div>
    <div>unionid{{ isPower ? "已授权" : "未授权" }}</div> -->
    <template v-if="wx.openid">
      <div class="main" v-if="bindText === '绑定'">
        <div class="phone">
          <el-input
            clearable
            placeholder="请输入手机号码"
            maxlength="11"
            v-model.trim="value"
          >
            <el-image
              slot="prefix"
              :src="mobileIconUrl"
              class="image-icon"
            ></el-image>
          </el-input>
        </div>
        <div class="btn">
          <el-button round @click="clickBind">绑定</el-button>
        </div>
      </div>
      <div class="main1" v-else>
        <div class="phone">
          <el-image :src="mobileBindUrl" class="image-bg"></el-image>
          <div class="desc">当前绑定手机号：{{ value }}</div>
        </div>
        <div class="btn">
          <el-button round @click="clickBind">解绑</el-button>
        </div>
      </div></template
    >
  </div>
  <!-- <div class="home">
    <div class="nav">公众号网页{{ isWechat }}</div>
    <div class="nav">挂载</div>
    <div class="nav">{{ wx }}</div>
    <div class="nav">{{ wx.code }}</div>
    <div class="nav">{{ wx.openid }}</div>
    <div class="form">
      <div class="input-box" v-if="!btnDisabled">
        <span>手机：</span>
        <input
          class="input"
          type="tel"
          v-model="value"
          placeholder="请输入手机号码"
          maxlength="11"
        />
      </div>

      <span v-else class="value">√{{ value }}</span>
      <div class="button-box">
        <button
          :class="[{ disable: !!btnDisabled }, 'button']"
          @click="clickBind"
        >
          {{ bindText }}
        </button>
      </div>
    </div>
  </div> -->
</template>

<script>
import {
  reqwxMpOpenId,
  reqwxMpBindMobile,
  reqwxMpUnBindMobile,
  reqwxMpMobile,
} from "@/api/api";
export default {
  name: "HomeView",
  data() {
    return {
      isWechat: true, // 是否为微信环境（true：是；false：否）
      wx: {
        wxAppId: "wx32be180d426fd678", // 微信公众号 ID
        wxSecret: "11", // 微信公众号 密钥
        code: "", // 授权获取的 code
        openid: "", // 授权获取的 openid
        unionid: "", // 授权获取的用户唯一标识 unionid
      },
      query: {
        a: "",
        b: "",
      }, // 页面路径带参
      value: "", //输入框值
      bindText: "绑定",
      btnDisabled: false,
      imageBg: require("@assets/images/account_bg.png"),
      mobileIconUrl: require("@assets/images/mobile_icon.png"),
      mobileBindUrl: require("@assets/images/mobile_bind.png"),
      isPower: false,
    };
  },
  created() {
    // 检测是浏览器端还是微信端
    let ua = window.navigator.userAgent.toLowerCase();
    // console.log(ua);
    if (String(ua.match(/MicroMessenger/i)) === "micromessenger") {
      this.isWechat = true;
    } else {
      this.isWechat = false;
    }
  },
  mounted() {
    this.handleAuthorize();
    // this.getOpenId();
    // this.getSearchMobile("o3YRR5_oiq6uniS7PU9GdT5FjIqg");
  },
  methods: {
    // 获取openId
    async getOpenId(code) {
      let params = {
        appId: this.wx.wxAppId,
        code,
      };
      const res = await reqwxMpOpenId(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.wx.openid = res.data.openId;
      this.getSearchMobile(res.data.openId);
    },
    // 查询是否已经绑定了号码
    async getSearchMobile(openId) {
      let params = {
        openId,
      };
      this.wx.openid = openId;
      const res = await reqwxMpMobile(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { mobile } = res.data.wxMpLinkmanVO;
      if (mobile) {
        this.value = mobile;
        this.bindText = "解绑";
        this.btnDisabled = true;
      }
    },
    clickBind() {
      let { value, btnDisabled } = this;
      if (!btnDisabled) {
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!value) return this.$modal.notifyWarning("请输入手机号");
        if (!reg.test(value))
          return this.$modal.notifyWarning("请输入正确的手机号");
        this.bindMobile();
      } else {
        this.unBindMobile();
      }
    },
    // 绑定手机号
    async bindMobile() {
      let params = {
        openId: this.wx.openid,
        mobile: this.value,
      };
      const res = await reqwxMpBindMobile(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.bindText = "解绑";
      this.btnDisabled = true;
    },
    // 解绑手机号
    async unBindMobile() {
      let params = {
        openId: this.wx.openid,
      };
      // console.log(params);
      const res = await reqwxMpUnBindMobile(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.bindText = "绑定";
      this.btnDisabled = false;
      this.value = "";
    },
    /**
     * 微信公众号获取code及授权处理
     * 注意：页面路径上的自定义带参不要使用code和state，授权时会根据这两个参数处理逻辑
     * 再授权成功，并重定向之后，微信会在重定向路径上带上code和state参数
     */
    handleAuthorize() {
      /**
       * 判断是否是微信环境
       * 是微信环境：进行授权处理
       * 不是微信环境：不进行授权处理
       */
      if (!this.isWechat) return;
      /**
       * 判断是否有 微信公众号 ID和密钥
       * 该判断根据个人情况，决定是否需要
       * 一般如果需要前端传给后台接口则需要；如果不需要前端传给后台接口则不需要
       */
      if (!this.wx.wxAppId || !this.wx.wxSecret) return;
      /**
       * 这里使用了mint-ui框架，这条代码是loading展示
       * 可根据个人情况设置
       */
      // Indicator.open("微信授权中...");
      /**
       * 检查页面路径带参状况,以此来判断是否授权
       * 授权成功后：重定向路径上会带有相应的参数（code、state）
       * 授权前：页面路径上不会带有code、state参数（个人自定义参数最好不要使用这两个）
       */
      let pagePath = decodeURIComponent(window.location.href); // 页面路径
      let urlArray = pagePath.split("?");
      let WXAuthorize = window.localStorage.getItem("hasAuthorize") || false; // 是否已经微信网页授权
      let redirectQuery = ""; // 重定向自定义传参

      // 判断初始路径（授权前）上是否带参，以便之后写入重定向路径中
      if (urlArray.length > 1) {
        // 带参情况
        let query = urlArray[1].split("#")[0].split("&");

        query.forEach((item) => {
          let queryName = item.split("=")[0];
          let queryValue = item.split("=")[1];

          /**
           * 判断是授权后的重定向，还是授权前
           * true：已授权；false：未授权
           */
          if (WXAuthorize) {
            if (queryName === "state" && queryValue !== "authorize") {
              // 获取自定义参数
              let customQuery = queryValue.split("|");

              customQuery.forEach((queryItem) => {
                let customName = queryItem.split("=")[0];
                let customValue = queryItem.split("=")[1];

                /**
                 * 这里根据自己的实际带参情况进行判断
                 * 以原始 https://www.baidu.com?a=1&b=2 路径为例
                 */
                this.query[customName] = customValue;
              });
            } else if (queryName === "code") {
              // 获取微信授权后的code
              this.wx.code = queryValue;
              this.getOpenId(queryValue); //获取openId
            }
          } else {
            this.query[queryName] = queryValue;
          }
        });
      }

      // 判断是否已经微信授权
      if (WXAuthorize) {
        /**
         * 在授权成功后，将缓存中的授权成功记录清除
         * hasAuthorize：
         *              authorize：已授权
         *              没有该字段：未授权
         */
        window.localStorage.removeItem("hasAuthorize");
        /**
         * 通过code换取openid等信息
         * 授权成功，获取code值后的逻辑，根据自己的实际情况编写
         */

        return false;
      } else {
        /**
         * 缓存记录页面初始（即授权前）路径
         * 主要用于解决在页面手动刷新时，微信授权问题
         */
        !window.localStorage.getItem("WXAuthorizeUrl") &&
          window.localStorage.setItem("WXAuthorizeUrl", window.location.href);
        // 缓存记录已授权
        window.localStorage.setItem("hasAuthorize", "authorize");
        // 处理重定向带参
        for (let i in this.query) {
          if (redirectQuery) {
            redirectQuery += `|${i}=${this.query[i]}`;
          } else {
            redirectQuery += `${i}=${this.query[i]}`;
          }
        }
      }

      // 微信授权路径
      let WXAuthorizeUrl = window.localStorage.getItem("WXAuthorizeUrl");
      // 微信公众号 ID
      let appid = this.wx.wxAppId;
      // 授权后重定向的回调链接地址，请使用 urlEncode 对链接进行处理
      let redirectUri = encodeURIComponent(WXAuthorizeUrl);
      // 返回类型，请填写code
      let responseType = "code";
      /**
       * 应用授权作用域 snsapi_base、snsapi_userinfo
       * snsapi_base：不弹出授权页面，直接跳转，只能获取用户openid（静默授权）
       * snsapi_userinfo：弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息
       */
      let scope = "snsapi_base";
      //   let scope = "snsapi_userinfo";
      // 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
      let state = redirectQuery || "authorize";
      // 授权路径
      let authorizeUrl =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        redirectUri +
        "&response_type=" +
        responseType +
        "&scope=" +
        scope +
        "&state=" +
        state +
        "&connect_redirect=1#wechat_redirect";
      // 进行授权操作，获取code信息(code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期)
      window.location.href = authorizeUrl;
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    .image-bg {
      width: 100%;
    }
  }
  .main,
  .main1 {
    .phone {
      margin-top: 80px;
      display: flex;
      justify-content: center;
      .el-input {
        width: 80%;
      }
      .image-icon {
        width: 32px;
        height: 32px;
        border-radius: 3px;
        padding-top: 1.5px;
      }
    }
    .btn {
      width: 100%;
      margin-top: 50px;
      display: flex;
      justify-content: center;
      .el-button {
        width: 80%;
        height: 50px;
        font-size: 20px;
        color: #fff;
        background: linear-gradient(#89b9e7, #8aecec);
        border: none;
      }
    }
  }
  .main1 {
    .phone {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .image-bg {
        width: 30%;
        margin-bottom: 15px;
      }
    }
    .btn {
      margin-top: 40px;
      .el-button {
        background: #cacaca;
      }
    }
  }
}

// prefix图片对齐
::v-deep .el-input__prefix {
  display: flex;
  align-items: center;
}

::v-deep .el-input__suffix {
  display: flex;
  align-items: center;
}

::v-deep .el-input__suffix-inner {
  display: flex;
  align-items: center;
}

::v-deep .el-input--prefix .el-input__inner {
  padding-left: 40px;
}

// input输入框
::v-deep .el-input__inner {
  height: 50px;
  line-height: 50px !important;
  font-size: 16px;
  color: #494949;
  border: none;
  border-radius: 10px !important;
  background-color: #f7f7f7;

  &::placeholder {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ababab;
  }
}
// .home {
//   width: 100vw;
//   height: 100vh;
//   background-color: #f7f7f7;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   // justify-content: center;
//   .form {
//     margin-top: 30vh;
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     .input-box {
//       margin-bottom: 50px;
//       padding: 0 10px 5px;
//       border-bottom: 2px solid #f2f2f2;
//       .input {
//         width: 60vw;
//         height: 40px;
//         font-size: 16px;
//         border: none;
//         outline: none;
//         // border-bottom: 2px solid #f2f2f2;
//         background-color: #f7f7f7;
//         border-radius: 10px;
//       }

//       ::-webkit-input-placeholder {
//         /* WebKit, Blink, Edge */
//         color: #999;
//         font-size: 14px;
//       }
//     }
//     .value {
//       margin-bottom: 30px;
//     }
//     .button-box {
//       .button {
//         width: 70vw;
//         height: 40px;
//         font-size: 16px;
//         color: #fff;
//         outline: none;
//         background-color: #7367f0;
//         border-radius: 10px;
//         border: 1px solid #f2f2f2;
//         &:active {
//           opacity: 0.5;
//         }
//       }
//       .disable {
//         background-color: #999;
//       }
//     }
//   }
// }
</style>